import React from 'react'
import { Tabs,Alert} from 'antd';
import { connect} from 'dva'
import WrapperAccountLoginForm from './WrapperAccountLoginForm.js'
import logo from "./../../assets/logo.png"
import styles from './Login.less'


/**
 * 1> 在cra中无法在jsx中直接使用assets下的静态资源，一种解决办法就是像上面这样用file-loader导入；
 * 2> 如果你非要在jsx中使用相对路径导入文件需要放到静态资源目录，也就是public中，public目录的路径将会原样打包输出；
 * 3> vue路由匹配最终只会匹配一条，是github regExptoPath，这使得在应用布局是需要先impor布局文件然后使用他，
 *      react则不同，他通过react-router的层级路由，分布式渲染各个组件，他不需要引入布局文件，布局文件与路由紧耦合。
 */
const { TabPane } = Tabs;

class Login extends React.Component{
	constructor(props){
		super(props);		
	}
	onTabChange=(params)=>{  //暂时没有用到
		console.log(params);
	}	
	render(){
        //console.log(this.props.user)
		return (
			<div className={[styles.pageContent,styles.login].join(" ")}>
				<div className={styles.loginHeader}>
					<img src={logo} className={styles.logo} alt="logo" /> 				
					<span className={styles.title}>China Unionpay</span>
					<p className={styles.desc}>china unionpay 是中国金融行业最有创新精神的企业</p>
				</div>
				<Tabs defaultActiveKey="1" onChange={this.onTabChange} className={styles.tabs}>
				    <TabPane tab="账号密码登录" key="1">
				    	{/* 登陆结果错误提示，最好搞个state loginResult=true控制 */}
				    	{
				    		(()=>{				    			
				    			if(!this.props.user.token){
				    				return  <Alert message="Error" type="error" showIcon />
				    			}
				    		})()
				    	}				    	
				    	<WrapperAccountLoginForm />
				    </TabPane>
				  	 <TabPane tab="手机免密登录" key="2">
                       <Alert message="暂不支持手机登录" type="warning" /> 	
				    </TabPane>
				</Tabs>
			</div>
		)
	}
}
export default connect(function(state){
	return {
		user:state.app.user
	}
})(Login)
